<template>
  <div class="category">
    <div class="top">
      <header-search></header-search>
    </div>
    <div class="com">
      <div class="left" ref="leftElement">
        <ul>
          <li
            v-for="(item, i) in left"
            :key="item.id"
            @click="tabList(i, item.displayName)"
            ref="liElements"
          >
            <a :class="index == i ? 'active' : ''"
              >{{ item.displayName }}
              <span class="line"></span>
            </a>
          </li>
        </ul>
      </div>
      <div class="right" ref="rightScroll">
        <ul>
          <li v-for="(item, i) in right" :key="i">
            <div class="wrap" ref="wrap">
              <a
                :class="[
                  'title_count',
                  name == item.category.displayName ? 'active' : '',
                ]"
              >
                <p class="mv">
                  <span class="mv_title">{{ item.category.displayName }}</span>
                  <span class="mv_count">/共{{ item.albumCount }}张专辑</span>
                </p>
                <div class="icon">
                  <van-icon name="arrow" />
                </div>
              </a>
              <div class="box" v-if="item.category.subCategories">
                <a
                  v-for="(ele, i) in item.category.subCategories"
                  :key="i"
                  :href="`#${ele.link}`"
                >
                  <span>
                    {{ ele.displayValue }}
                  </span>
                </a>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <my-load v-if="isShow"></my-load>
  </div>
</template>

<script>
import { initCategoryData } from "@/request/api.js";

export default {
  name: "MyCategory",
  data() {
    return {
      left: [],

      right: [],
      index: 0,
      name: "",
      isShow: false,
    };
  },
  created() {
    this.initData();
  },
  watch: {
    // index(val){
    //     let  h = this.$refs.liElements[0].scrollHeigh
    //     this.$refs.ulElement1.scrollTop = h * val
    // }
  },

  methods: {
    async initData() {
      let flag = localStorage.getItem("flag");
      if (flag) {
        this.isShow = flag;
      }
      let { data: res } = await initCategoryData();
      console.log("分类", res);
      this.name = res.data[0].category.displayName;
      res.data.forEach((item) => {
        let obj = {
          categoryId: item.category.categoryId,
          displayName: item.category.displayName,
        };

        this.left.push(obj);
      });

      this.right = res.data;

      if (this.right) {
        this.isShow = false;
        localStorage.setItem("flag", this.isShow);
      }
    },
    tabList(i, name) {
      this.index = i;
      this.name = name;
      let h = this.$refs.liElements[i].scrollHeight;
      this.$refs.leftElement.scrollTop = h * this.index;
      this.$refs.rightScroll.scrollTop = this.$refs.wrap[i].offsetTop - 60;
      console.log(this.$refs.wrap[i].offsetTop - 60);
    },
  },
  mounted() {
    document.body.style.background = "#f0f0f0";
  },
  destroyed() {
    document.body.style.background = "#fff";
  },
};
</script>

<style lang="scss" scoped>
.category {
  position: relative;
  padding-top: 60px;
  height: 100vh;
  .top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  .com {
    width: 100%;
    height: 100%;
    display: flex;
    .left::-webkit-scrollbar {
      display: none;
    }
    .left {
      width: 90px;
      height: 100%;
      background-color: #fff;
      overflow-y: auto;
      > ul {
        > li {
          > a {
            display: block;
            display: block;

            text-align: center;
            font-size: 14px;
            padding: 15px 0;
            line-height: 20px;
            color: #72727b;

            position: relative;
            border-bottom: 1px solid #e8e8e8;
            position: relative;
            .line {
              position: absolute;
              top: 0;
              left: 0;
              display: inline-block;
              height: 100%;
              width: 5px;
              background-color: #f86442;
              display: none;
            }
          }

          a.active .line {
            display: block;
          }
        }
      }
    }
    .right {
      width: calc(100% - 90px);
      height: 100%;
      overflow-y: auto;
      background-color: #fff;
      //   padding-left: 10px;
      > ul {
        > li {
          .wrap {
            .title_count {
              margin-left: 10px;
              padding-right: 15px;
              display: block;
              height: 50px;
              border-bottom: 1px solid #e8e8e8;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .mv {
                color: #40404c;
                .mv_title {
                  font-size: 14px;
                  font-weight: 700;
                  margin-right: 6px;
                }
                .mv_count {
                  font-size: 12px;
                }
              }
              .icon {
                font-size: 14px;
                color: #7e8c8d;
              }
            }

            .title_count.active .mv {
              color: #fe7959;
            }
            .box {
              a {
                display: inline-block;
                font-size: 14px;
                color: #7e8c8d;
                padding: 7.5px;
              }
            }
          }
        }
      }
    }
  }
}
</style>

